<!--
 * @Author: 陆成杰
 * @Date: 2022-06-30 13:44:05
 * @LastEditTime: 2022-07-01 14:11:53
 * @LastEditors: 陆成杰
 * @FilePath: /boe/src/views/program-manager/Marquee.vue
 * Copyright (c) ${now_year} by zucc-陆成杰, All Rights Reserved. 
-->
<template>
  <div class="wrap">
    <div class="content">
      <div class="screen">
        <div class="notice">{{ noticeContent }}</div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
defineProps<{
  noticeContent: string;
}>();
</script>
 
<style lang='less' scoped>
.wrap {
  width: 100%;
  height: 100%;
  // background-color: #fff;
  padding-top: 30px;
  padding-left: 50px;
}
.content {
  width: 90%;
  height: 90%;
  background-color: #000;
  // margin-top: 7%;
  border: 20px solid #ab6e2b;
}
.screen {
  width: 96.5%;
  height: 91%;
  border: 20px solid #fff;
  overflow: hidden;
}
.notice {
  color: #fff;
  -webkit-animation: mymove 8s linear infinite;
}
@keyframes mymove {
  0% {
    transform: translateX(95%);
  }
  100% {
    transform: translateX(0%);
  }
}
</style>
